<template>
  <div>
    <div class="bookStyle clear">
      <div class=" bookStyleEvery">
        <div class="left">
          <img src="@/assets/images/i7.png" width="48">
        </div>
        <div class="left bookName">
          <h2>一般图书</h2>
          <div class="bookText">
            <p><span>约稿：</span><label>4</label></p>
            <p><span>稿件：</span><label>0</label></p>
          </div>
        </div>
      </div>
      <div class=" bookStyleEvery">
        <div class="left">
          <img src="@/assets/images/i8.png" width="44">
        </div>
        <div class="left bookName">
          <h2>教材教辅</h2>
          <div class="bookText">
            <p><span>约稿：</span><label>4</label></p>
            <p><span>稿件：</span><label>0</label></p>
          </div>
        </div>
      </div>
      <div class=" bookStyleEvery">
        <div class="left">
          <img src="@/assets/images/i9.png" width="53">
        </div>
        <div class="left bookName">
          <h2>工具书</h2>
          <div class="bookText">
            <p><span>约稿：</span><label>4</label></p>
            <p><span>稿件：</span><label>0</label></p>
          </div>
        </div>
      </div>
      <div class=" bookStyleEvery">
        <div class="left">
          <img src="@/assets/images/i10.png" width="51">
        </div>
        <div class="left bookName">
          <h2>期刊</h2>
          <div class="bookText">
            <p><span>约稿：</span><label>4</label></p>
            <p><span>稿件：</span><label>0</label></p>
          </div>
        </div>
      </div>
    </div>
    <div class="contribution clear"><!-- 7.6 类名 clear 新加-->
      <div class="clear contributionTitle"><!-- 7.6 div新加  类名 clear新加-->
        <h2>我的稿件</h2>
        <ul class="contributionList"><!-- 7.6 类名 clear新删-->
          <li :class="{nowPage : 0 == active}"><a href="javascript:;" v-on:click="switchArticle(0,1)">所有稿件(<span>100</span>)</a></li>
          <li :class="{nowPage : 1 == active}"><a href="javascript:;" v-on:click="switchArticle(1,2)">退休稿件(<span style="color: #ff6600;">24</span>)</a></li>
          <li :class="{nowPage : 2 == active}"><a href="javascript:;" v-on:click="switchArticle(2,3)">待选用稿件(<span>0</span>)</a></li>
          <li :class="{nowPage : 3 == active}"><a href="javascript:;" v-on:click="switchArticle(3,4)">编辑中稿件(<span>11</span>)</a></li>
          <li :class="{nowPage : 4 == active}"><a href="javascript:;" v-on:click="switchArticle(4,5)">定稿稿件(<span>0</span>)</a></li>
          <li :class="{nowPage : 5 == active}"><a href="javascript:;" v-on:click="switchArticle(5,6)">退稿稿件(<span>82</span>)</a></li>
        </ul>
        <a href="javascript:;" class="more" style="position:inherit;float:right;">更多&nbsp; >></a><!-- 7.6 样式新加-->
      </div>
      <div class="contributionContent">
        <div class="contributionDiv clear" style="display: block;" >
          <div class="contributionDemo" v-for="article in article">
            <h3>{{article.true_name}}</h3>
            <div class="clear contributionDemoText">
              <div class="left DemoImg ">
                <img src="@/assets/images/i16.png" width="88">
              </div>
              <div class="left DemoText">
                <p><span>状态：</span><label>带选用</label></p>
                <p><span>大小：</span><label>10KB</label></p>
                <p><span>版本：</span><label>V4.0.125</label></p>
                <p><span>时间：</span><label>2018-04-03</label></p>
              </div>
            </div>
            <div class="DemoTool">
              <a href="javascript:;" class="DemoTiding"><img src="@/assets/images/i12.png" width="19"><font
                size="1">25</font></a>
              <a href="javascript:;"><img src="@/assets/images/i13.png" width="15"></a>
              <a href="javascript:;" v-show="retreat == 1"><img src="@/assets/images/i14.png" width="17"></a>
              <a href="javascript:;"><img src="@/assets/images/i15.png" width="20"></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "HomeMyArticle",
      props: {
        article: Array
      },
      data:function(){
        return {
          active: 0,
          retreat: 0
        }
      },
      methods: {
        switchArticle: function (type,pageNum) {
          this.active = type;
          this.retreat = type;
          this.$emit('change',pageNum);
        }
      }
    }
</script>

<style scoped>

</style>
